<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0" />
					<!-- 订单列表 -->
					<view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock">
						<view class="head">
							<!-- <view class="shop wanl-gray" @tap="onShop(order.shop_id)" v-if="order.shop">
								<text class="wlIcon-dianpu1 wanl-black"></text>
								<text class="wanl-black margin-lr-xs text-30">{{ order.shop.shopname }}</text>
								<text class="wlIcon-fanhuigengduo text-sm"></text>
							</view> -->
							<view class="order_num">
								订单编号：{{order.order_no}}
							</view>
							<view class="margin-right-bj text-sm">
								<text class="state" :style="{ color: order.stateTipColor }">{{ order.state_text }}</text>
								<text v-if="order.state === 7" class="margin-left-sm wlIcon-lajitong" @tap="deleteOrder(order.id, okey)"></text>
							</view>
						</view>
						<!-- 商品 -->
						<view >
							<view class="goods-box" v-for="(goods, gkey) in order.order_item" :key="goods.id" @tap="orderDetails(order.id, order.order_type)">
								<view class="cu-avatar xl margin-right-bj radius" :style="{ backgroundImage: 'url(' + $wanlshop.oss(goods.image, 70, 70) + ')' }"></view>
								<view class="content11 margin-right-bj">
									<view class="describe">
										<view class="text-cut-2">
											{{ goods.title }}
										</view>
									</view>
									<view class="parameter1">
										<view class="text-price1 text-sm text-black">
											原价：¥
											<text class="text_price1_text">{{ goods.price || 0}}</text>
											<!-- <text v-if="parseFloat(order.pay.system_price) > 0">
												<text style="margin-left: 20rpx;">旧件抵：</text>
												<text class="text_price1_text" >{{order.pay.system_price}}</text>
											</text>
											<text v-if="parseFloat(order.pay.coupon_price) > 0">
												<text style="margin-left: 20rpx;">优惠券抵扣：</text>
												<text class="text_price1_text" >{{order.pay.coupon_price}}</text>
											</text>
											<text v-if="parseFloat(order.pay.score_price) > 0">
												<text style="margin-left: 20rpx;">积分抵扣：</text>
												<text class="text_price1_text" >{{order.pay.score_price}}</text>
											</text>
											<view style="margin-top: 10rpx;">
											运费：<text class="text_price1_text" style="margin-right: 20rpx;" >{{order.pay.freight_price}}</text>	{{order.state == 1?'实际应付：':'实付：'}}<text class="text_price1_text" >{{order.pay.price}}</text>
											</view> -->
										</view>
										<view class="text-min wanl-gray">x {{ goods.number }}</view>
										<!-- 退款状态:0=未退款,1=退款中,2=待退货,3=退款完成 -->
										<view class="text-min text-yellow" v-if="goods.refund_status != 0">
											{{ getRefund(goods.refund_status) }}
										</view>
									</view>
									
								</view>
							</view>
						</view>
						<view class="text-price1 text-sm text-black jiage">
							<text v-if="parseFloat(order.pay.system_price) > 0">
								<text style="margin-left: 20rpx;">非平台抵扣：</text>
								<text class="text_price1_text" >{{order.pay.system_price}}</text>
							</text>
							<text v-if="parseFloat(order.pay.coupon_price) > 0">
								<text style="margin-left: 20rpx;">优惠券抵扣：</text>
								<text class="text_price1_text" >{{order.pay.coupon_price}}</text>
							</text>
							<text v-if="parseFloat(order.pay.score_price) > 0">
								<text style="margin-left: 20rpx;">积分抵扣：</text>
								<text class="text_price1_text" >{{order.pay.score_price}}</text>
							</text>
							<text v-if="parseFloat(order.pay.oldstaff_price) > 0">
								<text style="margin-left: 20rpx;">旧物抵扣：</text>
								<text class="text_price1_text" >{{order.pay.oldstaff_price}}</text>
							</text>
							<text v-if="parseFloat(order.pay.invoice_price) > 0">
								<text style="margin-left: 20rpx;">发票抵扣：</text>
								<text class="text_price1_text" >{{order.pay.invoice_price}}</text>
							</text>
							<text style="margin-left: 30rpx;"  v-if="parseFloat(order.pay.freight_price) > 0">
							运费：<text class="text_price1_text" style="margin-right: 20rpx;" >{{order.pay.freight_price}}</text>
							</text>
							<text style="margin-left: 30rpx;">{{order.state == 1?'实际应付：':'实付：'}}</text>
							<text class="text_price1_text" >{{order.pay.price}}</text>
						</view>
						<view class=" text-sm  jiage text-green fr" style="margin-top: 15rpx" v-if="order.reject_reason">
							<text style="margin-left: 30rpx;margin-top: 100rpx;">拒绝理由：</text>
							<text class="" >{{order.reject_reason}}</text>
						</view>
						
						<view :class="['jiage', (order.order_type_text.indexOf('线下') >=0|| order.order_type_text.indexOf('发票')>=0)?'stust1':'stust']" style="margin-top: 15rpx">
							{{ order.order_type_text}}
						</view>
						<!-- 底部 -->
						<!-- <view class="price-box text-sm flex">
							<view v-if="order.pay.discount_price > 0" class="margin-right-sm wanl-gray">优惠：<text class="text-price">{{ order.pay.discount_price }}</text></view>
							<view v-if="order.pay.freight_price > 0" class="margin-right-sm wanl-gray">快递：<text class="text-price">{{ order.pay.freight_price }}</text></view>
							<view>实付款：<text class="text-price">{{ order.pay.price }}</text></view>
						</view> -->
						<view class="action-box padding-bottom-bj" v-if="order.state == 1">
							<button class="cu-btn round line-black margin-lr-bj" @tap="editAddress(order.id)">修改地址</button>
							<button class="cu-btn round line-black" @tap="cancelOrder(order)">取消订单</button>
							<button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="paymentOrder(order.id)">立即支付</button>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.state == 2">
							<button class="cu-btn round line-black" @tap="toChat(order.shop_id)">联系商家</button>
							<button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="editAddress(order.id)">修改地址</button>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.state == 3">
							<button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button>
							<button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="confirmOrder(order)">确认收货</button>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.state == 4">
							<!-- <button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button> -->
							<button class="cu-btn round margin-lr-bj line-black" @tap="commentOrder(order.id)">评论订单</button>
						</view>
					</view>
					<uni-load-more :status="tag.loadingType" :content-text="contentText" />
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '全部',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 1,
					text: '待支付',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 2,
					text: '待发货',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 3,
					text: '待收货',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					state: 4,
					text: '待评论',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				}
				// ,{
				// 	state: 7,
				// 	text: '已关闭',
				// 	loadingType: 'more',
				// 	current_page: 1,
				// 	orderList: []
				// }
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			},
			options:{
				state:0
			}
		};
	},
	onLoad(options) {
		if (!options.state) {
			this.options.state = 0;
		}else{
			this.options.state = options.state;
		}
		
	},
	onShow() {
		this.tabCurrentIndex = +this.options.state;
		// #ifndef MP
		this.loadData();
		// #endif
		// #ifdef MP
		if (options.state == 0) {
			this.loadData();
		}
		// #endif
		
		uni.removeStorageSync('ReturnOfGoodsUrl')
	},
	onPullDownRefresh() {
		console.log('---')
		setTimeout(()=>{
			this.loadData();
			uni.stopPullDownRefresh()
		},2000)
	},
	methods: {
		//获取订单列表
		loadData(source) {
			
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			console.log(this.navList[index]);
			let navItem = this.navList[index];
			console.log(navItem);
			let state = navItem.state;
			//判断是否最后一页
			if (navItem.loadingType == 'noMore') {
				return;
			}
			//tab切换只有第一次需要加载数据
			if (source === 'tabChange' && navItem.loaded === true) {
				return;
			}
			//防止重复加载
			if (navItem.loadingType === 'loading') {
				return;
			}
			navItem.loadingType = 'loading';
			// 获取列表
			this.$api.get({
				url: '/wanlshop/order/getOrderList',
				data: {
					state: state,
					page: navItem.current_page
				},
				success: (res) => {
					console.log(res);
					navItem.current_page = res.data.current_page; //当前页码
					if (res.data.last_page === res.data.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					
					let orderList = res.data.data.filter((item) => {
						//添加不同状态下订单的表现形式
						item = Object.assign(item, this.orderStateExp(item.state));
						//演示数据所以自己进行状态筛选
						if (state === 0) {
							//0为全部订单
							return item;
						}
						return item.state === state;
					});
					orderList.forEach((item) => {
						navItem.orderList.push(item);
					});
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		onLogistics(id) {
			uni.navigateTo({
				url: '/pages/UserCenter/MyOrders/LogisticsInfo/LogisticsInfo?id=' + id
			});
		},
		//删除订单
		deleteOrder(order_id, key) {
			uni.showLoading({
				title: '请稍后'
			});
			this.$api.post({
				url: '/wanlshop/order/delOrder',
				data: {
					id: order_id
				},
				success: (res) => {
					this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
					uni.hideLoading();
				}
			});
		},
		//取消订单- 设置为7 -全局
		cancelOrder(item) {
			uni.showLoading({
				title: '请稍后'
			});
			// 获取列表
			this.$api.post({
				url: '/wanlshop/order/cancelOrder',
				data: {
					id: item.id
				},
				success: (res) => {
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						return false
					}
					let { stateTip, stateTipColor } = this.orderStateExp(7);
					item = Object.assign(item, {
						state: 7,
						stateTip,
						stateTipColor
					});
					this.$store.commit('statistics/order', {
						pay: this.$store.state.statistics.order.pay - 1,
						whole: this.$store.state.statistics.order.whole - 1
					});
					// 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级
					let list = this.navList[1].orderList;
					let index = list.findIndex((val) => val.id === item.id);
					index !== -1 && list.splice(index, 1);
					// 删除后修改全部中的为7
					if (this.tabCurrentIndex == 1) {
						let list = this.navList[0].orderList;
						let index = list.findIndex((val) => val.id === item.id);
						if (index !== -1) {
							list[index].state = 7;
						}
					}
					uni.hideLoading();
				}
			});
		},
		commentOrder(id) {
			this.$wanlshop.to('/pages/UserCenter/MyOrders/PublishEvaluation/PublishEvaluation?order_id=' + id);
			// uni.navigateTo({
			// 	url:'/pages/UserCenter/MyOrders/PublishEvaluation/PublishEvaluation?item='+encodeURIComponent(JSON.stringify(item))
			// })
		},
		orderDetails(id, type) {
			uni.navigateTo({
				url: '/pages/UserCenter/MyOrders/orderdetail/orderdetail?id=' + id + '&type=' + type
			});
		},
		//支付订单
		paymentOrder(id) {
			this.$wanlshop.to(`/pages/page/pay?order_id=${id}&order_type=goods`);
		},

		//确认收货- 全局
		confirmOrder(item) {
			uni.showLoading({
				title: '请稍后'
			});
			// 获取列表
			this.$api.post({
				url: '/wanlshop/order/confirmOrder',
				data: {
					id: item.id
				},
				success: (res) => {
					let { stateTip, stateTipColor } = this.orderStateExp(4);
					item = Object.assign(item, {
						state: 4,
						stateTip,
						stateTipColor
					});
					this.$store.commit('statistics/order', {
						receiving: this.$store.state.statistics.order.receiving - 1,
						evaluate: this.$store.state.statistics.order.evaluate + 1
					});
					uni.hideLoading();
				}
			});
		},
		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#333';
			switch (+state) {
				case 1:
					stateTip = '等待支付';
					stateTipColor = '#F4895E';
					break;
				case 2:
					stateTip = '等待卖家发货';
					break;
				case 3:
					stateTip = '卖家已发货';
					stateTipColor = '#E32D1D';
					break;
				case 4:
					stateTip = '交易成功';
					break;
				case 5:
					stateTip = '售后订单';
					break;
				case 6:
					stateTip = '已完成';
					break;
				case 7:
					stateTip = '订单已取消';
					stateTipColor = '#777';
					break;
				case 8:
					stateTip = '非平台订单审核中';
					stateTipColor = '#E32D1D';
					break;
				case 9:
					stateTip = '旧物审核未通过';
					stateTipColor = '#E32D1D';
					break;
				//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		},
		getRefund(status) {
			return ['退款', '退款中', '待退货', '退款完成', '退款关闭', '退款被拒'][status];
		},
		// 修改地址
		editAddress(id) {
			this.$wanlshop.to('/pages/UserCenter/MyAddress/MyAddress?isChoose=2&order_id=' + id);
		},
		// // 修改地址
		// editAddress(id) {

		// 	this.$wanlshop.to('/pages/user/address/address?source=2&order_id=' + id);
		// },
		//添加或修改成功之后回调
		async refreshList(address_id, order_id) {
			uni.showLoading({
				title: '正在提交新地址'
			});
			// 获取列表
			this.$api.post({
				url: '/wanlshop/order/editOrderAddress',
				data: {
					id: order_id,
					address_id: address_id
				},
				success: (res) => {
					this.$wanlshop.msg('地址修改成功');
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
.content {
	height: auto !important;
	min-height: 0 !important;
	justify-content: space-between !important;
	flex-direction: row !important;
}
.order_num {
	font-size: 26rpx;
	font-family: Source Han Sans SC-Regular, Source Han Sans SC;
	font-weight: 400;
	color: #666666;
}
.order-item {
	padding: 20rpx !important;
}
.parameter1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 22rpx;
}
.content11 {
	width: 70%;
}
.goods-box {
	justify-content: space-between;
	padding-top: 0;
	margin-top: 20rpx;
}
.goods-box1{
	display: flex;
	justify-content: space-between;
	padding-top: 0;
	/* margin-top: 20rpx; */
}
.text-cut-2 {
	/* height: 76rpx; */
}
.text-price1 {
	font-size: 24rpx;
	font-family: Source Han Sans SC-Bold, Source Han Sans SC;
	font-weight: bold;
	color: #e32d1d;
	/* display: flex;
	align-items: center; */
}
.text_price1_text {
	font-size: 30rpx;
}
.action-box {
	height: 104rpx;
	border-top: 2rpx solid #f4f4f4;
	margin-top: 20rpx;
}
.cu-btn {
	position: relative;
	top: 10rpx;
}
.xl {
	width: 176rpx;
	height: 176rpx;
}
.head {
	height: auto !important;
}
.stust {
	font-size: 24rpx;
	font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
	font-weight: normal;
	color: #e4662e;
}
.stust1 {
	font-size: 24rpx;
	font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
	font-weight: normal;
	color: #3DC05A;
}

.zhihuan{
		width: 36rpx;
		height: 36rpx;
		margin: 28rpx 32rpx;
	}
	.jiage{
		width: 100%;
		text-align: right;
	}
</style>
